<script setup lang="ts">
  import type { ExpressData } from '@/types/medicine'
  import AMapLoader from '@amap/amap-jsapi-loader'
  import { onMounted, onUnmounted } from 'vue'

  let map: any = null

  //接收父子传参数据
  interface Props {
    logisticsInfo: ExpressData
  }
  const props = defineProps<Props>()

  onMounted(async () => {
    ;(window as any)._AMapSecurityConfig = {
      securityJsCode: '49a729b83d240ca5e3b6d9cff55d4245',
    }

    //创建地图实例对象
    const AMap = await AMapLoader.load({
      key: 'f8ba03b7fa4afe796f25be5504d9dc5b', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })

    //起点
    const start = props.logisticsInfo.logisticsInfo.pop()
    //终点
    const end = props.logisticsInfo.logisticsInfo.shift()

    //初始化地图
    map = new AMap.Map('container', {
      // 设置地图容器id
      viewMode: '3D', // 是否为3D地图模式
      zoom: 11, // 初始化地图级别//设置地图的显示样式
      center: [
        Number(props.logisticsInfo.currentLocationInfo.longitude),
        Number(props.logisticsInfo.currentLocationInfo.latitude),
      ], // 初始化地图中心点位置
    })

    //绘制起点到终点的路线
    AMap.plugin('AMap.Driving', function () {
      const driving = new AMap.Driving({
        policy: 0, //驾车路线规划策略，0是速度优先的策略
        //map 指定将路线规划方案绘制到对应的 AMap.Map 对象上
        map: map,
        //showTraffic: true, //是否显示实时交通状况，默认 false
        showTraffic: false,
        hideMarkers: true, //是否隐藏起点和终点的标记，默认 false
      })
      const startLngLat = [start?.longitude, start?.latitude] //起始点坐标
      const endLngLat = [end?.longitude, end?.latitude] //终点坐标
      const opts = {
        waypoints: props.logisticsInfo.logisticsInfo
          .map((item) => [item.longitude, item.latitude])
          .reverse(), //途经点参数，最多支持传入16个途经点
      }
      driving.search(startLngLat, endLngLat, opts, function (status: any, result: any) {
        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
        //查询成功时，result 即为对应的驾车导航信息
        if (status === 'complete') {
          setTimeout(() => {
            map.setFitView([carMarker]) + // 设置中心点
              map.setZoom(10) // 设置缩放级别
          }, 3000)
        }
      })
    })

    //绘制起点和终点的标记
    const startMarker = new AMap.Marker({
      position: new AMap.LngLat(start?.longitude, start?.latitude),
      icon: '/static/images/start.png', //添加 icon 图标 URL
      title: '起点',
      anchor: 'bottom-center',
    })

    const endMarker = new AMap.Marker({
      position: new AMap.LngLat(end?.longitude, end?.latitude),
      icon: '/static/images/end.png', //添加 icon 图标 URL
      title: '终点',
      anchor: 'bottom-center',
    })

    //定位当前位置
    const carMarker = new AMap.Marker({
      position: new AMap.LngLat(
        Number(props.logisticsInfo.currentLocationInfo.longitude),
        Number(props.logisticsInfo.currentLocationInfo.latitude)
      ),
      offset: new AMap.Pixel(-10, -10),
      icon: '/static/images/car_left.png', //添加 icon 图标 URL
      title: '当前位置',
    })
    map.add([startMarker, endMarker, carMarker])
  })

  onUnmounted(() => {
    map?.destroy()
  })
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
  #container {
    width: 100%;
    height: 470px;
  }
  .custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
  }

  .custom-content-marker img {
    width: 100%;
    height: 100%;
  }

  .custom-content-marker .close-btn {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
  }

  .custom-content-marker .close-btn:hover {
    background: #666;
  }
</style>
